<template>
  <view class="poster" :class="show ? 'show' : 'hide'">
    <view class="mask" @click="hide"></view>
    <view class="inner" @click.stop>
      <view class="content">
        <view class="close" @click="hide">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <view class="title">投诉</view>
        <view class="form">
          <view class="form-item">
            <view class="form-item-label">投诉类型</view>
            <view class="form-item-content flex tags">
              <view
                class="tag-item"
                v-for="item in typeList"
                :key="item.value"
                :class="{ active: item.value == type }"
                @click="onType(item)"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="form-item-label">备注</view>
            <view class="form-item-content">
              <view class="form-item-content-item">
                <textarea
                  class="textarea"
                  v-model="content"
                  placeholder="请输入"
                ></textarea>
              </view>
            </view>
          </view>
        </view>
        <view class="btns">
          <view class="btn" @click="handleSave">提交</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  model: {
    prop: "show",
    event: "input",
  },
  data() {
    return {
      typeList: [
        {
          name: "低俗色情",
          value: 1,
        },
        {
          name: "政治敏感",
          value: 2,
        },
        {
          name: "质量差",
          value: 3,
        },
        {
          name: "不良言论",
          value: 4,
        },
        {
          name: "血腥暴力",
          value: 5,
        },
        {
          name: "其他",
          value: 6,
        },
      ],
      type: 1,
      content: "",
    };
  },
  methods: {
    hide() {
      this.$emit("hide", false);
    },
    onType(item) {
      this.type = item.value;
    },
    handleSave() {
      uni.request({
        url: "/wanlshop/local_life/add_complaint",
        method: "POST",
        data: {
          id: this.info.id,
          type: this.type,
          content: this.content,
        },
        success: (res) => {
          uni.showToast({
            title: "投诉成功",
            icon: "success",
          });
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.poster {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &.show {
    display: flex;
    animation: show 0.3s ease-in-out;
  }
  @keyframes show {
    0% {
      transform: scale(0.8);
    }
    100% {
      transform: scale(1);
    }
  }

  &.hide {
    display: none;
    animation: hide 0.3s ease-in-out;
  }
  @keyframes hide {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0.8);
    }
  }
  .inner {
    width: 80%;
    position: relative;
  }
  .content {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
  }
  .close {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    font-size: 32rpx;
    color: #0c4cff;

  }
  .title {
    background: #eaf2ff;
    font-size: 32rpx;
    text-align: center;
    color: #0c4cff;
    line-height: 96rpx;
  }
  .form {
    padding: 40rpx 32rpx;
  }
  .form-item {
    margin-top: 40rpx;
  }
  .form-item-label {
    margin-bottom: 30rpx;
  }
  .textarea {
    width: 100%;
    padding: 20rpx;
    border: 1rpx solid #ccc;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #333;
  }
  .tags {
    gap: 10px;
    flex-wrap: wrap;
  }
  .tag-item {
    display: inline-block;
    padding: 8rpx 16rpx;
    background: #eaf2ff;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #333;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    &.active {
      background: #0c4cff;
      color: #fff;
    }
  }
  .btns {
    display: flex;
    width: 100%;
    padding: 20rpx 32rpx;

    .btn {
      width: 100%;
      background: #3156ff;
      box-shadow: 0rpx 0rpx 51rpx 0rpx rgba(239, 242, 255, 0.45);
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      line-height: 88rpx;
      border-radius: 44rpx;
    }
  }
}
</style>
